<template>
  <div class="box"></div>
  <label><input type="radio" name="color" value="blue" v-model="colorVal" /> 蓝色</label>
  <label><input type="radio" name="color" value="yellow" v-model="colorVal" /> 黄色</label>
  <label><input type="radio" name="color" value="green" v-model="colorVal" /> 绿色</label>
  <hr>
  <F />
  <hr>
  <G />
</template>

<script setup lang='ts'>
import { ref, reactive, provide, readonly } from 'vue'
import F from './21依赖注入/F.vue'
import G from './21依赖注入/G.vue'

const colorVal = ref('red')

provide('colorVal', readonly(colorVal))

</script>

<style lang='scss' scoped>
.box {
  width: 100px;
  height: 100px;
  background-color: v-bind(colorVal);
}
</style>